<template>
  <div>
    <div class="windowInfo windowInfo2">

      <div class="showBox1">
        <div class="tableBox">
          <a-table :columns="columns" :pagination="false" :data-source="data" bordered rowKey="identificationCode"
            size="small" style="width:100%">
            <div slot="title" slot-scope="currentPageData">
              <div class='topInfo' style="display:flex">
                <div style="width:100%;text-align:center;color:#fff;font-size:16px">BUC设备(上变频+功放)状态显示</div>


              </div>
            </div>
            <div slot="action" slot-scope="text, record">
              <a-popconfirm overlayClassName="poperLayTable" title="确定发送状态查询指令吗?" @confirm="() => handleStatusQuery()">
                <a href="#">状态查询</a>
              </a-popconfirm>
            </div>

            <!-- <span v-else>——</span> -->

          </a-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import '@/assets/less/dashborder.less'
import $ from 'jquery'
import { mapGetters } from 'vuex'
import { getAction, httpAction } from '@/api/manage'
export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        console.log(msg, '-----websocket的数据');
        if (msg.cmd == 'BUC_REFRESH') {
          this.getData()
        }
      },
    },
  },
  data() {
    const columns = [
      {
        title: '参数下发状态',
        dataIndex: 'DistributionStatus',
        key: 'DistributionStatus',
        customRender: function (text) {
          if (text == '00') {
            return '失败'
          } else if (text === '01') {
            return '成功'
          } else {
            return '/'
          }
        }

      },
      {
        title: '输出频率(KHz)',
        dataIndex: 'FrequencyDisplay',
        key: 'FrequencyDisplay',
      },
      {
        title: '衰减值(dB)',
        key: 'AttenuationValue',
        dataIndex: 'AttenuationValue',
        // scopedSlots: { customRender: 'AttenuationValue' },
      },
      {
        title: '定频本振锁定',
        dataIndex: 'FixedFrequencyLocking',
        key: 'FixedFrequencyLocking',
      },
      {
        title: '跳频本振锁定',
        dataIndex: 'FMLock',
        key: 'FMLock',
      },
      {
        title: '功率检测(dBm)',
        dataIndex: 'PowerDetection',
        key: 'PowerDetection',
      },
      {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        fixed: 'right',
        width: 147,
        scopedSlots: { customRender: 'action' },
      },

    ]

    const data = [
      {
        // DistributionStatus: '1',
        // PowerDetection: '2',
        // FMLock: '2',
        // FixedFrequencyLocking: 1,
        // FrequencyDisplay: 1,

      },

    ]

    return {
      data,
      columns,
      url: {
        sendDevicePackage: "/device/nmcDeviceGridValue/sendDevicePackage",
        getByChannelCodeAndPackageCode: '/device/nmcDeviceGridValue/getByChannelCodeAndPackageCode',//全参数
        getByChannelCodeAndPackageCodeAndGridCode: '/device/nmcDeviceGridValue/getByChannelCodeAndPackageCodeAndGridCode',//单参数
      }
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    getData() {
      let data = {
        channelCode: 'BUC',
        packageCode: 'BUC-控制反馈',
        gridCode: 'BUC-控制反馈-回执',
      }
      getAction(this.url.getByChannelCodeAndPackageCodeAndGridCode, data).then(res => {
        if (res.success) {
          this.$set(this.data[0], 'DistributionStatus', res.result.packageGridValue)
        }
      })
      let temp = {
        channelCode: 'BUC',
        packageCode: 'BUC-状态回报',
      }
      getAction(this.url.getByChannelCodeAndPackageCode, temp).then(res => {
        if (res.success) {

          this.$set(this.data[0], 'FrequencyDisplay', res.result.find(i => i.packageGridCode == 'BUC-状态回报-频率').packageGridValue)
          this.$set(this.data[0], 'AttenuationValue', res.result.find(i => i.packageGridCode == 'BUC-状态回报-衰减器设置').packageGridValue)
          this.$set(this.data[0], 'FixedFrequencyLocking', res.result.find(i => i.packageGridCode == 'BUC-状态回报-定频本振').packageGridValue)
          this.$set(this.data[0], 'FMLock', res.result.find(i => i.packageGridCode == 'BUC-状态回报-跳频本振').packageGridValue)
          this.$set(this.data[0], 'PowerDetection', res.result.find(i => i.packageGridCode == 'BUC-状态回报-功率检测').packageGridValue)
        }
      })
    },
    handleStatusQuery(value) {
      let params = {
        "channelCode": "BUC",
        "packageCode": "BUC-状态查询"
      }
      httpAction(this.url.sendDevicePackage, params, 'post').then((res) => {
        if (res.code == 200) {
          this.$message.success('BUC-状态查询指令已发送！')
        } else {
          this.$message.error(res.message)
        }
      })


    },

  },
}
</script>

<style lang="less" scoped>
// .showBox1{
.topInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;

}

// }
/* .windowInf */
.titleBox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 30px;

  .keyBox {
    font-size: 14px;

    color: #fff;
    height: auto;
    display: flex;
    border-radius: 15px;
    padding: 5px;

    div {
      padding: 0 2px;
    }

    .WPZ {
      line-height: 14px;
      margin-right: 5px;

      &::before {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: red;
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    .JL {
      line-height: 14px;

      &::before {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: rgb(108, 245, 108);
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    // .WJL {
    //   background: rgb(230, 215, 19);
    // }
    // .JL {
    //   background: rgb(80, 226, 60);
    // }
    // .DX {
    //   background: rgb(119, 118, 118);
    // }
  }
}
</style>

<style lang="less" scoped>
.tableBox {
  width: 100%;

  .ant-table-header {
    background: transparent !important;
    font-weight: 500 !important;
  }

  .ant-table .ant-table-thead>tr>th {
    background: transparent !important;
    font-weight: 500 !important;
  }

  h5 {
    margin: 3px;
    padding: 0;
    color: #fff;
  }
}


.windowInfo {
  position: relative;
  min-width: 45px;
  min-height: 45px;

  line-height: 30px;
  text-align: center;
  color: #fff;
  padding: 5px 2px;
  background: rgba(30, 36, 50, 0.6) !important;

  .bodyBox {
    // width: 250px;
    display: flex;

    .body {
      width: 250px;
      margin: -1px;
      border: 1px solid;
    }
  }
}

/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}

.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>

<style>
.windowInfo .ant-empty-normal {
  color: #fff;
}

.windowInfo .ant-table .ant-table-row:hover>td {
  /* color: #fff; */
  /* background: #fff !important; */
}

/* .windowInfo2 .ant-select-selection {
  background: transparent;
  color: #fff;
}
.windowInfo2 .ant-select-arrow svg {
  color: #fff;
} */
.err {
  color: red;
}

.gre {
  color: rgb(108, 245, 108);
}

.windowInfo .ant-descriptions-title,
.windowInfo .ant-descriptions-item-label,
.windowInfo .ant-descriptions-item-content {
  color: #fff !important;
}

.tableBox {
  display: flex;

}
</style>
